<template>
  <el-card shadow="never" class="aui-card--fill">
    <div class="mod-home">
      <div class="title">校园设施报修系统</div>

      <div class="section">
        <div class="section-title">系统介绍</div>
        <div class="content">
          <p>校园维修工单系统是为师生提供的便捷报修平台，</p>
          <p>旨在高效处理校园各类设施设备维修需求，</p>
          <p>提高服务质量和效率。</p>
          <p>通过本系统，您可以提交报修申请，</p>
          <p>跟踪维修进度，并对维修服务进行评价。</p>
        </div>
      </div>

      <div class="section">
        <div class="section-title">主要功能</div>
        <div class="content">
          <p>1. 在线报修：随时提交报修申请，描述故障问题</p>
          <p>2. 进度跟踪：实时查看维修工单处理状态</p>
          <p>3. 服务评价：对维修服务进行评分和评价</p>
          <p>4. 通知公告：接收维修相关通知</p>
        </div>
      </div>

      <div class="section">
        <div class="section-title">使用指南</div>
        <div class="content">
          <p>步骤1: 注册/登录系统</p>
          <p>步骤2: 填写报修信息</p>
          <p>步骤3: 提交维修申请</p>
          <p>步骤4: 等待维修处理</p>
          <p>步骤5: 评价维修服务</p>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script setup lang="ts">
</script>

<style scoped>
.mod-home {
  line-height: 1.5;
}

.title {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 30px;
}

.section {
  margin-bottom: 30px;
}

.section-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #409EFF;
  border-bottom: 2px solid #eee;
  padding-bottom: 10px;
}

.content {
  font-size: 14px;
  color: #666;
}

.content p {
  margin: 8px 0;
  line-height: 1.6;
}
</style>
